From: Subject: Cut & Paste Random Transitions Slideshow Date: Wed, 15 Sep 2010 17:38:32 +0200 MIME-Version: 1.0 Content-Type: multipart/related; type="text/html"; boundary="----=_NextPart_000_0000_01CB54FC.D10EC910" X-MimeOLE: Produced By Microsoft MimeOLE V6.00.2900.3664 This is a multi-part message in MIME format. ------=_NextPart_000_0000_01CB54FC.D10EC910 Content-Type: text/html; charset="iso-8859-1" Content-Transfer-Encoding: quoted-printable Content-Location: http://www.javascriptkit.com/script/script2/transitionshow.shtml Cut & Paste Random = Transitions Slideshow
=20
Categories: All =20 Tutorials =20
=20
JavaScript = Tutorials DHTML/ CSS Web=20 Building Tutorials
JS=20 Reference DOM Reference IE=20 Filters Reference CSS = Reference

Home = / Free = JavaScripts / Image = Slideshows=20 & Galleries / Here

Cut & Paste Random Transitions Slideshow

Credit: JavaScript=20 = Kit

Description: This is an image plus text = description slideshow that brings each image into view using 1 of 17 = randomly=20 chosen Transitio= nal=20 effects in IE browsers. For other browsers that don't support these = built in=20 effects, a custom fade transition is used instead. Each image can be = optionally=20 hyperlinked with a text description beneath it, and the slideshow pauses = when=20 the user moves the mouse over it. When it comes to transitions, the more = the=20 merrier!

Examples:

Directions

Step 1: Add the below into the <HEAD> of your=20 page:

You should download the below .js file, which the code above = references:

tr= ansitionshow.js

Step 2: Where you wish the slideshow to appear = inside the=20 BODY, add the following sample invocation code:

Make sure the property "wrapperid" is set = to an=20 arbitrary but unique string for each instance of the slideshow on = your=20 page. The images you wish to show are defined within the array=20 "imagearray":

imagearray: [
 ["summer.jpg",=20 "http://en.wikipedia.org/wiki/Summer", "_new", "Such a nice Summer=20 getaway."],
 ["winter.jpg", = "http://en.wikipedia.org/wiki/Winter", "",=20 "Winter is nice, as long as there's snow = right?"],
 ["spring.jpg", "",=20 "", "Flowers spring back to life in Spring."],
 ["autumn.jpg", = "", "",=20 "Ah the cool breeze of autumn."]
],

where each image is specified with the following = settings:

 ["image_path", = "optional_image_link",=20 "optional_link_target", "optional_text_description],

CSS = Library | JavaScript=20 & DHTML Menus | Cheap Printer Ink | Build a website | Software Geek | eUKhost- Web Hosting | Web Templates | Exchange Hosting
JavaScript Tools:
Site Info

CopyRight =A9 1998-2010 JavaScript Kit. NO PART may = be=20 reproduced without author's permission.

------=_NextPart_000_0000_01CB54FC.D10EC910 Content-Type: image/gif Content-Transfer-Encoding: base64 Content-Location: http://www.javascriptkit.com/jkincludes/jksitelogo.gif R0lGODlhyQBBAIcAAAAAAAUFBQwMDBERERoaGiQkJCwtLDIzMjc4Nzo7OiNVHCFZGSNaHCJcGiNc HCVYHiVeHSdUISZcICpUJChYICldIStdJCxaJixdJT9APzFVLDZSMjZcMDhUND5UOzlZNT5aOiZg HilhIS1jJy1kJi5mKDBmKTJlLDFoKTNpLDRqLTdsLztgNjhkMjxlNzlsMj1qOD9uOD1wNj9yOEFd PUByOUJ0O0RzPUV1PkJDQkdIR0xMTEZfQkhaRk1eSlNUU1VbVFheVltcW0ZiQUdoQkVuQEplR01g SkZ2QEh3Qkp3REp6Q0p6REx6Rk18Rk59SFNqT1RlUl1hXV5qXFBzS1F7S1B+SlR/T1p2Vl51Wlp4 VWFiYWNpY2lqaWxxamx5anB4bnN0c3Z5dnh+d3p8elSBTleEUViEUlyGVl+DW16JWGGKXGOMXWWL X2SNX2SFYGWMYG+EbGmLZGqRZG6UaXOAcnWJcn6BfXyLe3GTbnCWa3KXbXOYbnaSc3eRdHaXcnaa cXeccnmRdnmddXycd36heYGjfYKkfoCAgISIhIiLh4uMi4OegIaZhI2TjJSVlJWYlZqbmoWggYam gYumiIiohIyriJGujZOskJmml56gnpKwjpOwkJWxkZexlJm0lZ63mp64mqCin6C5naK8n6Oko6Kq oKSpo6aopqusq6KyoaO8oKa4o6S8oa2zrKq6qLO0s7a4tra/tLq7uqnApqzCqa/ErLDFrLPHsbXD srTJsbjHtrnBub/Av7zGu77EvLjJtbnMtrvMucDJvsPEw8bIxsrLysLTwMbWxMjXxc7QzsnYxsvZ yczays7azM7czNDdztHS0dLU0tTV1NPb0tHd0NbY1tTe0tXe1Nnb2dPg0dTg09bi1djj19nj2Nrk 2dzi297g3t7m3t7o3eDh4OLk4uTn4+Tm5OHq4ePs4ubo5uTs4+Xt5Ojt5ujq6Ors6uzt7Orw6ezy 6+7w7u707vD07/Hy8fL08vX29fP48/b49vn79/n6+fr8+vz+/AAAACH5BAMAAP8ALAAAAADJAEEA AAj/AP8JHEiwoMGDCBMqXMiwocOHECNKnEixIkF/GC1q3Mixo8ePEf310xdv3DVn2MS1u6fPH8iX MGPKfDmSHTRcnAChcZLEypo/mIBhm8fP5cyjSJMm7Sdvm61DaGyYCOGgatUQJ5TkYUVtXj+lYMOK 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 ------=_NextPart_000_0000_01CB54FC.D10EC910 Content-Type: text/css; charset="iso-8859-1" Content-Transfer-Encoding: quoted-printable Content-Location: http://www.javascriptkit.com/script/script2/bluetabs.css .bluetabs { BORDER-BOTTOM: black 2px solid } .bluetabs UL { TEXT-ALIGN: left; PADDING-BOTTOM: 3px; LIST-STYLE-TYPE: none; = MARGIN-TOP: 1px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; FONT: bold 12px = Verdana; MARGIN-BOTTOM: 0px; MARGIN-LEFT: 50px; PADDING-TOP: 3px } .bluetabs LI { MARGIN: 0px; DISPLAY: inline } .bluetabs LI A { BORDER-BOTTOM: #778 1px solid; BORDER-LEFT: #778 1px solid; = PADDING-BOTTOM: 3px; PADDING-LEFT: 7px; PADDING-RIGHT: 7px; BACKGROUND: = url(shade.gif) repeat-x left top; COLOR: #2d2b2b; BORDER-TOP: #778 1px = solid; MARGIN-RIGHT: 3px; BORDER-RIGHT: #778 1px solid; TEXT-DECORATION: = none; PADDING-TOP: 3px } .bluetabs LI A:visited { COLOR: #2d2b2b } .bluetabs LI A:hover { COLOR: #2d2b2b; TEXT-DECORATION: underline } .bluetabs LI.selected { =09 } .bluetabs LI.selected A { BACKGROUND-IMAGE: url(shadeactive.gif); BORDER-BOTTOM-COLOR: white } .bluetabs LI.selected A:hover { TEXT-DECORATION: none } .dropmenudiv_b { Z-INDEX: 100; BORDER-BOTTOM: #918d8d 0px solid; POSITION: absolute; = BORDER-LEFT: #918d8d 1px solid; BACKGROUND-COLOR: white; WIDTH: 200px; = FONT: 12px/18px Verdana; VISIBILITY: hidden; BORDER-TOP: #918d8d 0px = solid; TOP: 0px; BORDER-RIGHT: #918d8d 1px solid } .dropmenudiv_b A { BORDER-BOTTOM: #918d8d 1px solid; BORDER-LEFT: #918d8d 0px solid; = PADDING-BOTTOM: 3px; TEXT-INDENT: 5px; PADDING-LEFT: 0px; WIDTH: auto; = PADDING-RIGHT: 0px; DISPLAY: block; COLOR: black !important; BORDER-TOP: = #918d8d 0px solid; BORDER-RIGHT: #918d8d 0px solid; TEXT-DECORATION: = none; PADDING-TOP: 3px } * HTML .dropmenudiv_b A { WIDTH: 100% } .dropmenudiv_b A:hover { BACKGROUND-COLOR: #edf3f3; COLOR: black !important } ------=_NextPart_000_0000_01CB54FC.D10EC910 Content-Type: text/css; charset="iso-8859-1" Content-Transfer-Encoding: quoted-printable Content-Location: http://www.javascriptkit.com/script/script2/main.css @import url( bluetabs.css ); BODY { PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: = 0px; FONT: 90% "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, = sans-serif; BACKGROUND: white; PADDING-TOP: 0px } CODE.blockcode { BORDER-BOTTOM: gray 1px solid; BORDER-LEFT: gray 1px solid; = PADDING-BOTTOM: 5px; BACKGROUND-COLOR: white; PADDING-LEFT: 5px; WIDTH: = 400px; PADDING-RIGHT: 5px; DISPLAY: block; BORDER-TOP: gray 1px solid; = BORDER-RIGHT: gray 1px solid; PADDING-TOP: 5px } CODE { BACKGROUND-COLOR: lightyellow } .scriptbreadcrumb { TEXT-ALIGN: center; FONT-SIZE: 105% } #credits { PADDING-BOTTOM: 5px; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; = PADDING-TOP: 5px } .footad A { COLOR: brown !important; FONT-SIZE: 85%; TEXT-DECORATION: none } PRE { BORDER-BOTTOM: gray 1px dashed; BORDER-LEFT: gray 1px dashed; = PADDING-BOTTOM: 5px; BACKGROUND-COLOR: #efefef; PADDING-LEFT: 5px; = WIDTH: 98%; PADDING-RIGHT: 5px; FONT-SIZE: 13px; BORDER-TOP: gray 1px = dashed; BORDER-RIGHT: gray 1px dashed; PADDING-TOP: 5px } P.codearea { BORDER-BOTTOM: gray 1px dashed; BORDER-LEFT: gray 1px dashed; = PADDING-BOTTOM: 5px; BACKGROUND-COLOR: #efefef; PADDING-LEFT: 5px; = WIDTH: 98%; PADDING-RIGHT: 5px; FONT-SIZE: 13px; BORDER-TOP: gray 1px = dashed; BORDER-RIGHT: gray 1px dashed; PADDING-TOP: 5px } P.codearea { MARGIN: 10px 0px } TEXTAREA.codecontainer { BORDER-BOTTOM: gray 1px dashed; BORDER-LEFT: gray 1px dashed; = BACKGROUND-COLOR: #efefef; MARGIN-TOP: 1em; PADDING-LEFT: 5px; WIDTH: = 98%; HEIGHT: 150px; CLEAR: left; BORDER-TOP: gray 1px dashed; = BORDER-RIGHT: gray 1px dashed } .selectcode { MARGIN-TOP: 1em } .selectcode A.tabs { BORDER-BOTTOM: gray 0px solid; BORDER-LEFT: gray 1px solid; = PADDING-BOTTOM: 0px; PADDING-LEFT: 4px; PADDING-RIGHT: 4px; COLOR: navy; = BORDER-TOP: gray 1px solid; MARGIN-RIGHT: 3px; BORDER-RIGHT: gray 1px = solid; TEXT-DECORATION: none; PADDING-TOP: 0px } .selectcode A.tabs:visited { COLOR: navy } .selectcode A.tabs:active { COLOR: navy } .selectcode A.tabs:hover { BACKGROUND-COLOR: #efefef; COLOR: navy } .submitform P { MARGIN: 10px 0px } .submitform .inputbox { BORDER-BOTTOM: gray 1px solid; BORDER-LEFT: gray 1px solid; WIDTH: = 300px; BORDER-TOP: gray 1px solid; BORDER-RIGHT: gray 1px solid } .submitform TEXTAREA { BORDER-BOTTOM: gray 1px solid; BORDER-LEFT: gray 1px solid; WIDTH: = 450px; HEIGHT: 150px; BORDER-TOP: gray 1px solid; BORDER-RIGHT: gray 1px = solid } .submitform .formbuttons { BORDER-BOTTOM: black 1px solid; BORDER-LEFT: black 1px solid; = BORDER-TOP: black 1px solid; BORDER-RIGHT: black 1px solid } .codetitle { PADDING-LEFT: 19px; BACKGROUND: url(squarebullet2.png) white no-repeat = left center } .codeimages IMG { BORDER-BOTTOM: gray 1px dashed; BORDER-LEFT: gray 1px dashed; = BORDER-TOP: gray 1px dashed; MARGIN-RIGHT: 8px; BORDER-RIGHT: gray 1px = dashed } A:link { COLOR: #aa2716 } A:visited { COLOR: #821f11 } A:hover { COLOR: red } A:active { COLOR: red } .nounderline A { TEXT-DECORATION: none } .noindentlist { PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: = 0px; PADDING-TOP: 0px } .smalltext { FONT-SIZE: 90% } .maincontainer { BACKGROUND: url(verticalbar2.gif) repeat-y -10px 0px } .header { MARGIN-BOTTOM: 10px; FONT-SIZE: 120%; FONT-WEIGHT: bold } .comment { PADDING-BOTTOM: 10px; BACKGROUND-COLOR: #ececec; PADDING-LEFT: 10px; = WIDTH: 460px; PADDING-RIGHT: 10px; PADDING-TOP: 10px } .commentfooter { PADDING-LEFT: 58px; MARGIN-BOTTOM: 2em; BACKGROUND: url(arrow.gif) = no-repeat 20px 0px; COLOR: #4a4a4a; FONT-SIZE: 90%; PADDING-TOP: 1px } .categoryheader { BORDER-BOTTOM: gray 1px solid; BORDER-LEFT: gray 0px solid; = PADDING-BOTTOM: 2px; TEXT-TRANSFORM: uppercase; MARGIN: 0px 0px 1em; = PADDING-LEFT: 8px; PADDING-RIGHT: 0px; BACKGROUND: = url(categoryheader.gif) #d8e7cb repeat-x left top; COLOR: black; = BORDER-TOP: gray 1px solid; FONT-WEIGHT: bold; BORDER-RIGHT: gray 0px = solid; PADDING-TOP: 2px } .columntitleline { FONT-WEIGHT: bold } .columntitlebullet { FONT-WEIGHT: bold } .columntitlegradient { FONT-WEIGHT: bold } .columntitleline { PADDING-BOTTOM: 10px; BACKGROUND: url(line.gif) repeat-x left bottom; = FONT-SIZE: 110% } .columntitlebullet { BORDER-BOTTOM: gray 1px solid; MARGIN-TOP: 5px; TEXT-INDENT: 19px; = MARGIN-BOTTOM: 5px; BACKGROUND: url(bullet.gif) no-repeat left center; = FONT-SIZE: 105% } .columntitlegradient { BACKGROUND: url(gradient3.jpg) white repeat-y } #topsection { =09 } #jksitesearch #zoom_query { BORDER-BOTTOM: black 1px solid; BORDER-LEFT: black 1px solid; = PADDING-LEFT: 5px; WIDTH: 280px; FONT: bold 14px Arial; BACKGROUND: = lightyellow; HEIGHT: 18px; BORDER-TOP: black 1px solid; BORDER-RIGHT: = black 1px solid; PADDING-TOP: 5px } #jksitesearch .zoom_button { FONT: bold 14px Arial } #jksitesearch #jksitesearch_cat INPUT { MARGIN-LEFT: 15px } #topbar { BACKGROUND: #edf4e6; COLOR: black } #jklogo { PADDING-BOTTOM: 10px; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; = PADDING-TOP: 10px } #toprightdiv { TEXT-ALIGN: right; MARGIN: 10px 8px 0px 0px; FONT: bold 11px arial, = sans-serif; FLOAT: right } #toprightdiv A { LETTER-SPACING: 0.1pt; COLOR: navy; MARGIN-RIGHT: 4px; TEXT-DECORATION: = none } #toprightdiv A:hover { COLOR: blue } #toprightdiv #topform { PADDING-BOTTOM: 0px; MARGIN: 0px 0px 5px; PADDING-LEFT: 0px; = PADDING-RIGHT: 0px; PADDING-TOP: 0px } #toprightdiv #keywords { BORDER-BOTTOM: gray 1px solid; BORDER-LEFT: gray 1px solid; = PADDING-BOTTOM: 3px; OUTLINE-STYLE: none; PADDING-LEFT: 3px; WIDTH: = 210px; PADDING-RIGHT: 3px; FONT: 11px verdana, sans-serif; BACKGROUND: = #fbfcfa; COLOR: #443; BORDER-TOP: gray 1px solid; BORDER-RIGHT: gray 1px = solid; PADDING-TOP: 3px } #toprightdiv #keywords:focus { BORDER-BOTTOM: black 1px solid; BORDER-LEFT: black 1px solid; = BORDER-TOP: black 1px solid; BORDER-RIGHT: black 1px solid } #toprightdiv #topformbutton { BORDER-BOTTOM: #ccc 1px outset; BORDER-LEFT: #ccc 1px outset; = PADDING-BOTTOM: 1px; MARGIN-TOP: 5px; PADDING-LEFT: 1px; PADDING-RIGHT: = 1px; BACKGROUND: url(topbar3.jpg) repeat-x left top; COLOR: #666; = FONT-SIZE: 12px; BORDER-TOP: #ccc 1px outset; CURSOR: pointer; = FONT-WEIGHT: bold; BORDER-RIGHT: #ccc 1px outset; PADDING-TOP: 1px } #topbanner { TEXT-ALIGN: center; PADDING-BOTTOM: 10px; PADDING-LEFT: 0px; = PADDING-RIGHT: 0px; CLEAR: left; PADDING-TOP: 10px } #myform { PADDING-BOTTOM: 0px; MARGIN: 3px 0px 0px; PADDING-LEFT: 0px; = PADDING-RIGHT: 0px; FLOAT: right; PADDING-TOP: 0px } #myform .textinput { BORDER-BOTTOM: gray 1px solid; BORDER-LEFT: gray 1px solid; WIDTH: = 190px; BORDER-TOP: gray 1px solid; BORDER-RIGHT: gray 1px solid } #myform .submit { BORDER-BOTTOM: black 1px solid; BORDER-LEFT: black 1px solid; = BACKGROUND-COLOR: lightyellow; FONT: 12px Verdana; HEIGHT: 22px; = BORDER-TOP: black 1px solid; BORDER-RIGHT: black 1px solid } #leftcolumn { WIDTH: 170px; BACKGROUND: none transparent scroll repeat 0% 0%; FLOAT: = left; MARGIN-LEFT: -100% } #leftcolumn P { MARGIN: 8px } #leftcolumn DIV { MARGIN: 8px } #leftcolumn P.nomargin { PADDING-BOTTOM: 2px; MARGIN: 0px; PADDING-LEFT: 2px; PADDING-RIGHT: = 2px; PADDING-TOP: 2px } #leftcolumn DIV.nomargin { PADDING-BOTTOM: 2px; MARGIN: 0px; PADDING-LEFT: 2px; PADDING-RIGHT: = 2px; PADDING-TOP: 2px } #leftcolumn .bsaalt { TEXT-ALIGN: center; PADDING-BOTTOM: 0px; MARGIN: -3px 0px 0px 4px; = PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px } *:first-child + HTML #leftcolumn .bsaalt { MARGIN-TOP: -10px } * HTML #leftcolumn .bsaalt { MARGIN-TOP: -10px } #leftcolumn DIV.categoryheader { MARGIN: 0px } .ddmarkermenu { PADDING-BOTTOM: 0px; LIST-STYLE-TYPE: none; MARGIN: 0px 0px 8px; = PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px } .ddmarkermenu LI { PADDING-BOTTOM: 2px } .ddmarkermenu LI A { BORDER-BOTTOM: #dadada 1px solid; PADDING-BOTTOM: 2px; PADDING-LEFT: = 12px; PADDING-RIGHT: 0px; DISPLAY: block; BACKGROUND: = url(arrowbullet.png) no-repeat left center; COLOR: #aa2716; FONT-SIZE: = 90%; FONT-WEIGHT: bold; TEXT-DECORATION: none; PADDING-TOP: 2px } .ddmarkermenu LI A:visited { COLOR: #aa2716 } .ddmarkermenu A:hover { BACKGROUND-COLOR: #f3f3f3; COLOR: #aa2716 } .additionalpartners { POSITION: relative; LEFT: -5px } .additionalpartners A { FONT-SIZE: 12px; TEXT-DECORATION: none } #contentwrapper { WIDTH: 100%; FLOAT: left } #middlecolumn { PADDING-BOTTOM: 1em; BACKGROUND-COLOR: transparent; MARGIN: 0px 170px; = PADDING-LEFT: 12px; PADDING-RIGHT: 10px } .contentareas { WIDTH: 49%; FLOAT: left } .contentareas UL { PADDING-BOTTOM: 0px; MARGIN: 5px auto 10px 18px; PADDING-LEFT: 0px; = PADDING-RIGHT: 0px; FONT-SIZE: 16px; LIST-STYLE-IMAGE: url(heart.png); = PADDING-TOP: 0px } .contentareas LI { BORDER-BOTTOM: #ececec 1px solid; PADDING-BOTTOM: 2px; PADDING-LEFT: = 0px; PADDING-RIGHT: 0px; PADDING-TOP: 1px } .contentareas LI A { DISPLAY: block; COLOR: #911c11; FONT-SIZE: 16px; FONT-WEIGHT: bold; = TEXT-DECORATION: none } .contentareas LI A:hover { BACKGROUND: #e7eea8 } .contentareas LI A:visited { COLOR: navy } .contentareas LI SPAN A { FONT-WEIGHT: normal } .headers { BORDER-BOTTOM: #bbb 1px solid; TEXT-ALIGN: left; BORDER-LEFT: #bbb 1px = solid; PADDING-BOTTOM: 3px; MARGIN: 0px; PADDING-LEFT: 3px; = PADDING-RIGHT: 3px; BACKGROUND: url(chromebg.gif) repeat-x center = center; FONT-SIZE: 120%; BORDER-TOP: #bbb 1px solid; BORDER-RIGHT: #bbb = 1px solid; PADDING-TOP: 3px } .headers A { COLOR: navy; TEXT-DECORATION: none } .headers A:visited { COLOR: navy; TEXT-DECORATION: none } .headers A:active { COLOR: navy; TEXT-DECORATION: none } .headers A:hover { COLOR: blue } .contentlisting { BORDER-BOTTOM: #d8d8d8 1px solid; MARGIN-BOTTOM: 1em; FONT-SIZE: 90% } .contentlisting .title { PADDING-BOTTOM: 0px; MARGIN-TOP: 10px; PADDING-LEFT: 0px; = PADDING-RIGHT: 0px; MARGIN-BOTTOM: 0px; FONT-SIZE: 14px; PADDING-TOP: = 0px } .contentlisting .info { MARGIN: 1px 0px; COLOR: gray } DIV.info + P:first-letter { FONT: bold 180% Arial; FLOAT: left; MARGIN-RIGHT: 3px } .categorylinks LI A { WIDTH: 100% } #rightcolumn { BACKGROUND-COLOR: transparent; WIDTH: 165px; PADDING-RIGHT: 5px; FLOAT: = left; MARGIN-LEFT: -170px } #rightcolumn .newscontainer { BORDER-BOTTOM: #dadada 1px solid; BORDER-LEFT: #dadada 1px solid; = PADDING-BOTTOM: 5px; BACKGROUND-COLOR: lightyellow; PADDING-LEFT: 5px; = PADDING-RIGHT: 5px; MARGIN-BOTTOM: 1em; FONT-SIZE: 90%; BORDER-TOP: = #dadada 1px solid; BORDER-RIGHT: #dadada 1px solid; PADDING-TOP: 5px } #rightcolumn UL { PADDING-BOTTOM: 0px; LIST-STYLE-TYPE: none; MARGIN: 0px; PADDING-LEFT: = 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px } #contentfooter { PADDING-BOTTOM: 1em; FONT-FAMILY: Verdana; MARGIN-LEFT: 173px; CLEAR: = both; FONT-SIZE: 11px } #footerarea { TEXT-ALIGN: center; BACKGROUND: #edf4e6; HEIGHT: 50px; CLEAR: left; = FONT-SIZE: 12px; BORDER-TOP: gray 1px solid; PADDING-TOP: 10px } .clearfix:after { DISPLAY: block; HEIGHT: 0px; VISIBILITY: hidden; CLEAR: both; CONTENT: = "." } .clearfix { DISPLAY: inline-table } * HTML .clearfix { HEIGHT: 1% } .clearfix { DISPLAY: block } ------=_NextPart_000_0000_01CB54FC.D10EC910 Content-Type: text/css; charset="iso-8859-1" Content-Transfer-Encoding: quoted-printable Content-Location: http://www.javascriptkit.com/script/script2/main2cols.css #middlecolumn { PADDING-BOTTOM: 1em; BACKGROUND-COLOR: transparent; MARGIN: 0px 0px 0px = 170px; PADDING-LEFT: 11px; PADDING-RIGHT: 10px } #rightcolumn { DISPLAY: none } ------=_NextPart_000_0000_01CB54FC.D10EC910 Content-Type: text/css; charset="iso-8859-1" Content-Transfer-Encoding: quoted-printable Content-Location: http://www.javascriptkit.com/jkincludes/scripts.css @import url( main.css ); @import url( main2cols.css ); #scripttitle { TEXT-ALIGN: center; FONT-SIZE: 110%; FONT-WEIGHT: bold } .footad A { FONT: 11px Verdana; TEXT-DECORATION: none } PRE { BORDER-BOTTOM: gray 1px dashed; BORDER-LEFT: gray 1px dashed; = PADDING-BOTTOM: 5px; BACKGROUND-COLOR: #e9e9e9; PADDING-LEFT: 5px; = WIDTH: 95%; PADDING-RIGHT: 5px; BORDER-TOP: gray 1px dashed; = BORDER-RIGHT: gray 1px dashed; PADDING-TOP: 5px } .codehighlight { BORDER-BOTTOM: gray 1px dashed; BORDER-LEFT: gray 1px dashed; = PADDING-BOTTOM: 5px; BACKGROUND-COLOR: #e9e9e9; PADDING-LEFT: 5px; = WIDTH: 95%; PADDING-RIGHT: 5px; BORDER-TOP: gray 1px dashed; = BORDER-RIGHT: gray 1px dashed; PADDING-TOP: 5px } .codehighlight { FONT-FAMILY: Arial; FONT-SIZE: 13px } CODE { BACKGROUND-COLOR: #efefef; FONT-SIZE: 13px } ------=_NextPart_000_0000_01CB54FC.D10EC910 Content-Type: application/octet-stream Content-Transfer-Encoding: quoted-printable Content-Location: http://www.javascriptkit.com/script/script2/transitionshow.js //Random Transitions Slideshow- By JavaScript Kit = (http://www.javascriptkit.com) //Created: Nov 3rd, 2008 var global_transitions=3D[ //array of IE transition strings "progid:DXImageTransform.Microsoft.Barn()", "progid:DXImageTransform.Microsoft.Blinds()", "progid:DXImageTransform.Microsoft.CheckerBoard()", "progid:DXImageTransform.Microsoft.Fade()", "progid:DXImageTransform.Microsoft.GradientWipe()", "progid:DXImageTransform.Microsoft.Inset()", "progid:DXImageTransform.Microsoft.Iris()", "progid:DXImageTransform.Microsoft.Pixelate(maxSquare=3D15)", "progid:DXImageTransform.Microsoft.RadialWipe()", "progid:DXImageTransform.Microsoft.RandomBars()", "progid:DXImageTransform.Microsoft.RandomDissolve()", "progid:DXImageTransform.Microsoft.Slide()", "progid:DXImageTransform.Microsoft.Spiral()", "progid:DXImageTransform.Microsoft.Stretch()", "progid:DXImageTransform.Microsoft.Strips()", "progid:DXImageTransform.Microsoft.Wheel()", "progid:DXImageTransform.Microsoft.Zigzag()" ] function flashyslideshow(setting){ this.wrapperid=3Dsetting.wrapperid this.imagearray=3Dsetting.imagearray this.pause=3Dsetting.pause this.transduration=3Dsetting.transduration/1000 //convert from = miliseconds to seconds unit to pass into el.filters.play() this.currentimg=3D0 var preloadimages=3D[] //temp array to preload images for (var i=3D0; i
'+this.getSlideHTML(this.currentimg)+'
')= var effectindex=3DMath.floor(Math.random()*global_transitions.length) = //randomly pick a transition to utilize var contentdiv=3Ddocument.getElementById(this.wrapperid+"_inner") if (contentdiv.filters){ //if the filters[] collection is defined on = element (only in IE) contentdiv.style.filter=3Dglobal_transitions[effectindex] //define = transition on element this.pause+=3Dsetting.transduration //add transition time to pause } this.filtersupport=3D(contentdiv.filters && = contentdiv.filters.length>0)? true : false //test if element supports = transitions and has one defined var slideshow=3Dthis flashyslideshow.addEvent(contentdiv, = function(){slideshow.isMouseover=3D1}, "mouseover") flashyslideshow.addEvent(contentdiv, = function(){slideshow.isMouseover=3D0}, "mouseout") setInterval(function(){slideshow.rotate()}, this.pause) } flashyslideshow.addEvent=3Dfunction(target, functionref, tasktype){ if (target.addEventListener) target.addEventListener(tasktype, functionref, false); else if (target.attachEvent) target.attachEvent('on'+tasktype, function(){return = functionref.call(target, window.event)}); }, flashyslideshow.setopacity=3Dfunction(el, degree){ //sets opacity of an = element (FF and non IE browsers only) if (typeof el.style.opacity!=3D"undefined") el.style.opacity=3Ddegree else el.style.MozOpacity=3Ddegree el.currentopacity=3Ddegree }, flashyslideshow.prototype.getSlideHTML=3Dfunction(index){ var slideHTML=3D(this.imagearray[index][1])? '\n' : '' //hyperlink slide? slideHTML+=3D'' slideHTML+=3D(this.imagearray[index][1])? '
' : '
' slideHTML+=3D(this.imagearray[index][3])? this.imagearray[index][3] : = '' //text description? return slideHTML //return HTML for the slide at the specified index } flashyslideshow.prototype.rotate=3Dfunction(){ var contentdiv=3Ddocument.getElementById(this.wrapperid+"_inner") if (this.isMouseover){ //if mouse is over slideshow return } this.currentimg=3D(this.currentimg3) document.write('